<template>
    <el-container>
        <el-header>
            <stock-header></stock-header>
        </el-header>
        <el-main>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="change">
                <el-tab-pane label="月分位点" name="MultiMonthLpDetail">
                    <multi-month-lp-detail v-if="activeName ==='MultiMonthLpDetail'" :stocks="state.stocks"></multi-month-lp-detail>
                </el-tab-pane>
                <el-tab-pane label="月涨跌" name="MultiMonthPctDetail">
                    <multi-month-pct-detail v-if="activeName ==='MultiMonthPctDetail'" :stocks="state.stocks"></multi-month-pct-detail>
                </el-tab-pane>
                <el-tab-pane label="周分位点" name="MultiWeekLpDetail">
                    <MultiWeekLpDetail v-if="activeName ==='MultiWeekLpDetail'" :stocks="state.stocks"></MultiWeekLpDetail>
                </el-tab-pane>
                <el-tab-pane label="周涨跌" name="MultiWeekPctDetail">
                    <MultiWeekPctDetail v-if="activeName ==='MultiWeekPctDetail'" :stocks="state.stocks"></MultiWeekPctDetail>
                </el-tab-pane>
                <el-tab-pane label="日涨跌" name="MultiDayPctDetail">
                    <MultiDayPctDetail v-if="activeName ==='MultiDayPctDetail'" :stocks="state.stocks"></MultiDayPctDetail>
                </el-tab-pane>
                <el-tab-pane label="60W" name="MultiWeek300DDetail">
                    <MultiWeek300DDetail v-if="activeName ==='MultiWeek300DDetail'" :stocks="state.stocks"></MultiWeek300DDetail>
                </el-tab-pane>
                <el-tab-pane label="年涨跌" name="MultiYearPctDetail">
                    <MultiYearPctDetail v-if="activeName ==='MultiYearPctDetail'" :stocks="state.stocks"></MultiYearPctDetail>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { reactive } from 'vue'
import { getMultiDefaultStocks } from '../utils/help';

import StockHeader from '../components/StockHeader.vue';
import MultiMonthLpDetail from '../components/MultiMonthLpDetail.vue';
import MultiMonthPctDetail from '../components/MultiMonthPctDetail.vue';
import MultiWeekPctDetail from '../components/MultiWeekPctDetail.vue';
import MultiWeekLpDetail from '../components/MultiWeekLpDetail.vue';
import MultiWeek300DDetail from '../components/MultiWeek300DDetail.vue';
import MultiDayPctDetail from '../components/MultiDayPctDetail.vue';
import MultiYearPctDetail from '../components/MultiYearPctDetail.vue';


const activeNameKey = "MultiActiveName"
const activeName = ref(sessionStorage.getItem(activeNameKey) || 'MultiMonthLpDetail')

const state = reactive({
    stocks: "",
})
const change = (tabName) => {
    sessionStorage.setItem(activeNameKey, tabName)
}

state.stocks = getMultiDefaultStocks()
const {query: query} = useRoute()
if (query.stocks) {
    state.stocks = query.stocks
    if (!state.stocks.includes("上证指数")) {
        state.stocks = "上证指数;" + state.stocks
    }
}
</script>